<template>
  <div>
    <van-nav-bar title="修改收货地址"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-address-edit :area-list="areaList"
                      show-set-default
                      show-delete
                      :address-info="addressInfo"
                      :area-columns-placeholder="['请选择', '请选择', '请选择']"
                      @save="onEdit"
                      @delete="onDelete" />
  </div>
</template>
<script>
import { areaList } from '@vant/area-data'

export default {
  // 生命周期函数 生成DOM之前调用
  created() {
    // 从首页携带过来的值
    let addrid = this.$route.query.addrid
    // 将变量放到页面属性覆盖掉0这个值
    this.addrid = addrid
    // 调用下面方法
    this.info()
  },
  data() {
    return {
      addrid: 0,
      addressInfo: {},
      areaList,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    async onEdit(item) {
      item.id = this.addrid
      let result = await this.$api.onEdit(item)
      console.log(result)
      if (result.code === 1) {
        this.$notify({
          type: 'success',
          message: '更改成功',
          duration: 1500,
          onClose: () => {
            // 跳转到当前页面， 即刷新页面
            this.$router.go(0)
          },
        })
        return false
      } else {
        this.$notify({
          type: 'danger',
          message: '更改失败',
          duration: 1500,
        })
        return false
      }
    },
    async onDelete() {
      let data = {
        addrid: this.addrid,
      }
      let result = await this.$api.onDelete(data)
      if (result.code === 1) {
        this.$notify({
          type: 'success',
          message: '删除成功',
          duration: 1500,
          onClose: () => {
            // 跳转到上一个页面
            this.$router.go(-1)
          },
        })
        return false
      } else {
        this.$notify({
          type: 'danger',
          message: '删除失败',
          duration: 1500,
        })
        return false
      }
    },
    async info() {
      let data = {
        addrid: this.addrid,
      }
      let result = await this.$api.AddressInfo(data)
      if (result.code === 0) {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1500,
        })
        return false
      }
      let addressInfo = {
        name: result.data.consignee,
        tel: result.data.mobile,
        addressDetail: result.data.address,
        isDefault: result.data.status == 1 ? true : false,
      }
      if (result.data.province) {
        addressInfo.province = result.data.provinces.name
        addressInfo.areaCode = result.data.province.toString()
      }

      if (result.data.city) {
        addressInfo.city = result.data.citys.name
        addressInfo.areaCode = result.data.city.toString()
      }

      if (result.data.district) {
        addressInfo.county = result.data.districts.name
        addressInfo.areaCode = result.data.district.toString()
      }
      this.addressInfo = addressInfo
    },
  },
}
</script>